<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration top-left"></view>
    <view class="bg-decoration bottom-right"></view>
    
    <view class="login-box">
      <!-- 左侧品牌区域 -->
      <view class="brand-section">
        <view class="brand-logo">俊东碎语</view>
        <view class="brand-slogan">探索专属的精彩世界</view>
        <view class="brand-desc">
          分享技术，生活与思考，记录成长的每一个脚印
        </view>
      </view>
      
      <!-- 右侧登录表单 -->
      <view class="form-section">
        <view class="login-form">
          <view class="form-field">
            <view class="field-label">用户名</view>
            <view class="input-control">
              <input 
                type="text" 
                v-model="accountNumber"
                placeholder="请输入用户名"
                class="form-input"
              />
            </view>
          </view>
          
          <view class="form-field">
            <view class="field-label">密码</view>
            <view class="input-control">
              <input 
                type="password" 
                v-model="password"
                placeholder="请输入密码"
                class="form-input"
              />
            </view>
          </view>
          
          <view class="form-actions">
            <text class="forgot-link" @click="register">立即注册</text>
            <text class="forgot-link" @click="ceshi" style="margin-left: 10px; color: #999;">忘记密码?</text>
          </view>
          
          <button class="submit-btn" @click="login">登录</button>
    
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      accountNumber: "", // 账号
      password: "", // 密码
    };
  },
  methods: {
    async login() {
      uni.showLoading({
        title: "正在登录..",
      });

      let {
        result,
        total
      } = await uniCloud.callFunction({
        name: "overallSituation",
        data: {
          state: "look",
          accountNumber: this.accountNumber,
          password: this.password,
          databaseName: "userList",
        },
      });

      uni.hideLoading();

      console.log(result, "result");

      if (result.data.length) {
        // 存储用户信息到本地
        uni.setStorageSync("userInfo", result.data[0]);

        // 修改登录状态
        await uniCloud.callFunction({
          name: "overallSituation",
          data: {
            state: "update",
            databaseName: "userList",
            ...result.data[0],
            isLoagin: true
          },
        });

        // 跳转到首页
        uni.switchTab({
          url: "/pages/home/index",
        });
      } else {
        uni.showToast({
          title: "账号密码错误",
          icon: "none",
          duration: 2000,
        });
      }
    },
	
	register(){
		this.$router("/pages/login/register")
	},

    async ceshi() {
      // 忘记密码功能实现
      uni.showToast({
        title: "忘记密码功能开发中",
        icon: "none"
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f9fafb;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 500rpx;
  height: 500rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.1) 100%);
  z-index: 0;
}

.top-left {
  top: -250rpx;
  left: -250rpx;
}

.bottom-right {
  bottom: -250rpx;
  right: -250rpx;
}

/* 登录盒子 */
.login-box {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1000rpx;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 品牌区域 */
.brand-section {
  text-align: center;
  padding: 60rpx 30rpx;
  margin-bottom: 40rpx;
}

.brand-logo {
  font-size: 48rpx;
  font-weight: 700;
  color: #3B82F6;
  margin-bottom: 20rpx;
}

.brand-slogan {
  font-size: 28rpx;
  color: #1E293B;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.brand-desc {
  font-size: 22rpx;
  color: #64748B;
  max-width: 500rpx;
  margin: 0 auto;
  line-height: 1.6;
}

/* 表单区域 */
.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 50rpx 40rpx;
}

.form-header {
  margin-bottom: 40rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 10rpx;
}

.form-subtitle {
  font-size: 22rpx;
  color: #64748B;
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.field-label {
  font-size: 24rpx;
  color: #334155;
  font-weight: 500;
}

.input-control {
  position: relative;
}

.form-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  border: 1rpx solid #E2E8F0;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #1E293B;
  background-color: #F8FAFC;
}

.form-input::placeholder {
  color: #94A3B8;
  font-size: 22rpx;
}

.form-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.1);
}

/* 表单操作 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;
}

.forgot-link {
  font-size: 22rpx;
  color: #3B82F6;
}

/* 按钮样式 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #3B82F6;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: 500;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn:active {
  background-color: #2563EB;
}

/* 注册提示 */
.register-prompt {
  text-align: center;
  margin-top: 30rpx;
  font-size: 22rpx;
  color: #64748B;
}

.register-link {
  color: #3B82F6;
  font-weight: 500;
}
</style>
